// src/pages/searchResult/index.tsx
import React,{useEffect,useRef,useState} from "react";
import Header from "@shared/header";
import Back from "@shared/back";
import styles from "@pages/home/widgets/news/styles/styles.module.less";
import css from "@pages/searchResult/styles/styles.module.less";
import { Link } from "react-router-dom";
import GeekIcon from "@shared/geekIcon";
import { useParams } from "react-router-dom";
import { useTypedDispatch, useTypedSelector } from "@store/index";
import { useLazyRequestSearchResultQuery } from "@service/search";
import NewsItem from "@pages/home/widgets/news/widgets/Item";
import Infinite from "@shared/infinite";
import { clearResults, saveResults, searchResultSelectors } from "@slice/search";
export default function SearchResult() {
  // 获取搜索关键字
  const { key } = useParams();
  // 用于获取搜索结果的方法
  const [requestSearchResult] = useLazyRequestSearchResultQuery();
  // 用于记录页码
  // 由于在当前逻辑中, 页码只和逻辑有关, 和模板无关, 所以此处页码使用 ref 的方式存储
  // 如果使用状态的方式存储, 会导致页面发生无效更新
  const page = useRef(1);
  // 用于记录是否还有更多数据可以加载
  // 由于在模板中使用了 hasMore, 它的变化需要驱动视图更新, 所以采用状态的方式进行存储
  const [hasMore, setHasMore] = useState(true);
  // 用于记录本地已经存储的搜索结果的数量
  const localCount = useTypedSelector(searchResultSelectors.selectTotal);
  // 用于记录服务端返回的总数据数量, 初始为-1, 当做标识使用
  const allCount = useRef(-1);
  // 用于记录本地存储的搜索结果
  const results = useTypedSelector(searchResultSelectors.selectAll);
  // 获取 dispatch 方法
  const dispatch = useTypedDispatch();

  // 用于加载更多数据的方法
  const loadMore = () => {
    // 发送请求获取更多数据
    return requestSearchResult({ page: page.current, per_page: 10, q: key! })
      .unwrap()
      .then((response) => {
        // 保存搜索结果
        dispatch(saveResults(response.data.results));
        // 记录服务端返回的数据总量
        allCount.current = response.data.total_count;
        // 页码加一
        page.current = page.current + 1;
      });
  };
  
  // 监听本地存储的搜索结果数量是否发生变化
  useEffect(() => {
    // 如果当前为组件初次挂载, 不需要调用 setHasMore, 因为我们必须在组件初次挂载时假设 hasMore 的值为 true
    // 让它发送请求获取搜索结果
    if (allCount.current === -1) return;
    // 如果本地存储的搜索结果数量不等于数据总量
    // 表示还有更多数据可以加载
    setHasMore(localCount !== allCount.current);
  }, [localCount]);

  // 组件卸载之前清空搜索结果
  useEffect(() => {
    return () => {
      dispatch(clearResults());
    };
  }, [dispatch]);
  return (
    <div className={css.result}>
      <Header
        title={"搜索结果"}
        left={<Back onClick={() => dispatch(clearResults())} />}
      />
      <ul className={styles.news}>
        {results.map((news) => (
          <NewsItem key={news.art_id} news={news} />
        ))}
      </ul>
      <Infinite hasMore={hasMore} loadMore={loadMore} />
    </div>
  );
}